<template>
	<view class="demand-order-detail">
		<view class="demand-info">
			<view class="name">{{ info.title }}</view>
			<view class="bottom">
				<view class="price">{{ info.lowestPrice }}-{{ info.tallPrice }}</view>
				<view class="tag">{{ info.type === 'OPERATE' ? '营运' : '非营运' }}</view>
			</view>
		</view>
		<view class="nav-title">可跑平台</view>
		<view class="tags">
			<view class="tag" v-for="el in info.platform" :key="el">
				{{ el }}
			</view>
		</view>
		<view class="nav-title">其他要求</view>
		<view class="desc">
			{{ info.otherRequire }}
		</view>
		<block v-if="info.list && info.list.length > 0">
			<view class="nav-title">推荐车型</view>
			<view style="margin-top: 24rpx;">
				<car-list isTui :demandId="info.id" :isLoad="false" :tableData="info.list" status="nomore"
					@backInfo="init(info.id)" />
			</view>
		</block>
		<block v-if="info.status === 'TRANSACTION'">
			<view class="nav-title">下单车辆</view>
			<view class="order-item" @click="handOrderDetail">
				<view class="car-info">
					<image :src="info.ordersResp.coverPlan" mode="aspectFill"></image>
					<view class="info">
						<view class="name">{{ info.ordersResp.productName }} </view>
						<view class="desc">
							<text>{{ info.ordersResp.brand }}</text>
							<text>{{ info.ordersResp.model }}</text>
						</view>
						<view class="tags">
							<view class="tag" v-if="info.ordersResp.powerType">{{ info.ordersResp.powerType }}</view>
							<view class="tag" v-if="info.ordersResp.mileage">{{ info.ordersResp.mileage }}</view>
							<view class="tag" v-if="info.ordersResp.fineness">{{ info.ordersResp.fineness }}</view>
							<view class="tag" v-if="info.ordersResp.chargingMode">{{ info.ordersResp.chargingMode }}
							</view>
						</view>
					</view>
				</view>
				<view class="grid">
					<view class="grid-item">
						<view class="value">
							<text>{{ info.ordersResp.schemes.lease }}</text>
							<text>个月</text>
						</view>
						<view class="label">期数</view>
					</view>
					<view class="grid-item">
						<view class="value">
							<text>{{ info.ordersResp.schemes.rent }}</text>
							<text>元/月</text>
						</view>
						<view class="label">价格</view>
					</view>
					<view class="grid-item">
						<view class="value">
							<text>{{ info.ordersResp.schemes.deposit }}</text>
							<text>元</text>
						</view>
						<view class="label">押金(可退)</view>
					</view>
				</view>
			</view>
		</block>

		<view class="action-bottom">
			<template v-if="userType === 'user'">
				<template v-if="info.status === 'WAIT_SNATCH'">
					<button class="cu-btn" @click.stop="handCancel()">取消发布</button>
				</template>
				<template v-else-if="info.status === 'TRANSACTION'">
					<button class="cu-btn" @click.stop="handOrderDetail()">订单详情</button>
					<button class="cu-btn" @click.stop="handFa()">再次发布</button>
					<button class="cu-btn cu-btn-a" @click.stop="handShopPhone()">联系商家</button>
				</template>
				<template v-else-if="info.status === 'NOT_TRANSACTION'">
					<button class="cu-btn" @click.stop="handFa()">再次发布</button>
				</template>
				<template v-else>
					<button v-if="info.status === 'RECOMMEND'" class="cu-btn" @click.stop="handEnd()">结束</button>
					<template v-if="info.status === 'WAIT_CONFIRM'">
						<button class="cu-btn cu-btn-a">确认完成</button>
					</template>
				</template>
			</template>
			<template v-else>
				<template v-if="['WAIT_RECOMMEND', 'RECOMMEND'].includes(info.status)">
					<button class="cu-btn cu-btn-a" @click="handTui">推荐车型</button>
				</template>
				<button v-if="info.status !== 'NOT_TRANSACTION'" class="cu-btn cu-btn-a"
					@click="handPhone">联系用户</button>
			</template>
		</view>
		<uv-modal ref="modal" show-cancel-button confirm-color="#FF9113" @confirm="handConfirm" width="550rpx">
			<view style="line-height: 100rpx;">{{ tip }}</view>
		</uv-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onUnload,
	} from "@dcloudio/uni-app";
	import {
		doDetail,
		doCancel,
		doEnd
	} from '@/apis/demand.js'
	import CarList from '@/components/CarList.vue'
	const {
		proxy
	} = getCurrentInstance();
	const $back = inject('$back')

	const handOrderDetail = () => {
		let url = `/pagesA/order/detail?id=${info.value.orderId}`
		if (userType.value === 'shop') {
			url += `&type=shop`
		}
		uni.navigateTo({
			url
		})
	}
	const handTui = () => {
		uni.navigateTo({
			url: `/pagesA/order/recommend?id=${info.value.id}`,
			events: {
				tuiEvent: () => {
					init(info.value.id)
				}
			}
		})
	}
	const handPhone = () => {
		uni.makePhoneCall({
			phoneNumber: info.value.userCellphone
		})
	}
	const handShopPhone = () => {
		uni.makePhoneCall({
			phoneNumber: info.value.ordersResp.merchantPhone
		})
	}
	let type = 'cancel'
	const modal = ref()
	const tip = ref('')
	const handCancel = () => {
		type = 'cancel'
		tip.value = '确认要取消此需求吗?'
		modal.value.open()
	}
	const handFa = () => {
		uni.navigateTo({
			url: `/pagesA/releate/index?id=${info.value.id}`
		})
	}
	const handEnd = () => {
		type = 'end'
		tip.value = '确认要结束此需求吗?'
		modal.value.open()
	}
	const handConfirm = async () => {
		if (type === 'cancel') {
			await doCancel(info.value.id)
			uni.$uv.toast('已取消')
			isBackInfo = false
			const eventChannel = proxy.getOpenerEventChannel()
			eventChannel.emit('cancelEvent', info.value);
			setTimeout(() => {
				$back()
			}, 500)
		} else if (type === 'end') {
			await doEnd(info.value.id)
			uni.$uv.toast('已结束')
			init(info.value.id)
		}
	}
	const info = ref({
		platform: [],
		list: [],
		ordersResp: {}
	})
	const init = async (id) => {
		const data = await doDetail(id)
		data.platform = data.platform.split(',')
		if (data.ordersResp) {
			data.ordersResp.schemes = JSON.parse(data.ordersResp.schemes)
		}
		info.value = data
	}
	const userType = ref('user')
	onLoad((e) => {
		userType.value = e?.type || 'user'
		init(e.id)
	})

	let isBackInfo = true
	onUnload(() => {
		if (isBackInfo) {
			const eventChannel = proxy.getOpenerEventChannel()
			eventChannel.emit('backInfo', info.value);
		}
	})
</script>

<style lang="scss" scoped>
	.demand-order-detail {
		padding: 24rpx;
		padding-bottom: 150rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 150rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);

		.demand-info {
			padding-bottom: 44rpx;
			border-bottom: 1rpx solid #EEEEEE;

			.name {
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.bottom {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.price {
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FF4E00;
				}

				.tag {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #C16F0B;
					padding: 10rpx;
					background: linear-gradient(180deg, #FFF7E4 0%, #FFE49E 100%);
					border-radius: 10rpx 0rpx 10rpx 0rpx;
				}
			}
		}

		.nav-title {
			margin-top: 46rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.order-item {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 24rpx;
			box-sizing: border-box;
			position: relative;
			border: 1rpx solid #DDDDDD;

			&:not(:first-child) {
				margin-top: 40rpx;
			}

			.status {
				position: absolute;
				right: 24rpx;
				top: 24rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #F58701;
			}

			.car-info {
				display: flex;
				align-items: center;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 16rpx;
				}

				.info {
					flex: 1;
					margin-left: 24rpx;

					.name {
						font-size: 30rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.desc {
						margin-top: 8rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

					.tags {
						margin-top: 14rpx;
						display: flex;

						.tag {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							padding: 6rpx 12rpx;
							background: #F5F5F5;
							border-radius: 4rpx;

							&:not(:first-child) {
								margin-left: 8rpx;
							}
						}
					}
				}
			}

			.grid {
				margin-top: 32rpx;
				background: #F8F8F8;
				border-radius: 16rpx;
				padding: 32rpx 40rpx;
				display: flex;
				justify-content: space-between;

				&-item {
					.value {
						text {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #FF4E00;

							&:first-child {
								font-size: 32rpx;
							}
						}
					}

					.label {
						margin-top: 10rpx;
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}
			}

			.order-bottom {
				margin-top: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.tip {
					flex: 1;
					margin-right: 20rpx;
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #F57B01;
				}

				.btns {
					display: flex;
					align-items: center;

					.cu-btn {
						width: 192rpx;
						height: 74rpx;
						background: #F5F5F5;
						border-radius: 16rpx;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;

						&:not(:last-child) {
							margin-right: 20rpx;
						}

						&-a {
							background: #FFC434;
							color: #333333;
						}
					}
				}
			}
		}


		.tags {
			margin-top: 24rpx;
			display: flex;
			flex-wrap: wrap;
			gap: 12rpx;

			.tag {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				padding: 6rpx 16rpx;
				background: #F5F5F5;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}
		}

		.desc {
			margin-top: 24rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.action-bottom {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 3;
			width: 750rpx;
			background-color: #fff;
			padding: 18rpx 24rpx;
			box-shadow: 0rpx -2rpx 12rpx 2rpx rgba(0, 0, 0, 0.03);
			padding-bottom: 18rpx;
			box-sizing: border-box;
			padding-bottom: calc(constant(safe-area-inset-bottom) + 18rpx);
			padding-bottom: calc(env(safe-area-inset-bottom) + 18rpx);
			display: flex;
			justify-content: flex-end;

			.cu-btn {
				width: 192rpx;
				height: 74rpx;
				background: #F5F5F5;
				border-radius: 16rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				margin: 0;

				&:not(:last-child) {
					margin-right: 20rpx;
				}

				&-a {
					background: #FFC434;
					color: #333333;
				}
			}
		}
	}
</style>